/*标题栏*/
.header {
    margin-top: 0.5em;
    margin-bottom: 1.2em;
    padding: 0.5em 0;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

/*正文*/
.content {
    margin-left: 1em;
    margin-right: 1em;
}

/*列布局*/
.content::after {
    content: "";
    display: table;
    clear: both;
}

/* 文章中的链接有灰色下划线 */
.content a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: rgb(232, 230, 227);
}

/*左列*/
.leftcolumn {
    float: left;
    width: 75%;
    padding-right: 2em;
}

/*右侧栏*/
.rightcolumn {
    float: left;
    width: 25%;
}

/* 文章卡片效果 */
.card {
    border-radius: 2em;
    background-color: white;
    box-shadow: 0em 0.2em 0.2em #00000011;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
    padding-bottom: 2em;
    margin-top: 2em;
}

/*底部栏*/
.footer {
    text-align: center;
    padding-top: 2em;
    padding-bottom: 1em;
}

/*导航菜单*/
.nav_menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/*导航菜单项*/
.nav_item {
    float: right;
    margin-bottom: 0.4em;
    margin-right: 1em;
}

/*引用*/
.review {
    position: relative;
    max-width: 100%;
    margin-bottom: 48px;
    font-size: 20px;
    line-height: 1.75;
}

/*引用的左双引号*/
.review::before {
    display: block;
    position: absolute;
    left: -.6em;
    content: "\201C";
}

/*引用的右双引号*/
.review:after {
    display: inline-block;
    position: absolute;
    content: "\201D";
}

/*粉色字*/
.pink_text {
    color: hotpink;
}

/*震动动画*/
@-webkit-keyframes shake {
    0% {
        -webkit-transform: translate(1px, 1px);
    }

    25% {
        -webkit-transform: translate(-1px, -1px);
    }

    50% {
        -webkit-transform: translate(1px, 1px);
    }

    75% {
        -webkit-transform: translate(1px, -1px);
    }

    100% {
        -webkit-transform: translate(-1px, 1px);
    }
}

/*震动动画*/
@keyframes shake {
    0% {
        transform: translate(1px, 1px);
    }

    25% {
        transform: translate(-1px, -1px);
    }

    50% {
        transform: translate(0px, 0px);
    }

    75% {
        transform: translate(1px, -1px);
    }

    100% {
        transform: translate(-1px, 1px);
    }
}

/*震动文字*/
.shake {
    position: absolute;
    margin-left: 4px;
    margin-right: 4px;
    -webkit-animation: shake 0.2s infinite;
    animation: shake 0.2s infinite;
}

/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {

    .leftcolumn,
    .rightcolumn {
        width: 100%;
        padding: 0;
    }
}